<template>
  <div>
    <van-nav-bar left-text="" left-arrow @click-left="onClickLeft" />
    <div class="name">
      <p class="zi">欢迎登录cdf海南免税</p>
      <p class="zi1">未注册的手机号验证后自动创建cdf海南免税账户</p>
    </div>
    <div class="bottom">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <a href="">忘记密码？</a>
        
        <div class="zhuyi">
            <input type="checkBox"/>
           我已阅读并同意<span>《用户服务协议》</span>及<span>《隐私政策》</span>，并授权cdf海南免税使用该cdf海南免税账号信息进行统一管理。
        </div>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <p class="zi2">验证码登录</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      console.log();
      ("返回");
    },
  },
};
</script>

<style scoped>
.name {
  width: 100%;
  height: 130px;
  /* background-color: aquamarine; */
  box-sizing: border-box;
}
.zi {
  font-size: 22px;
  padding: 40px 0 0 25px;
}
.zi1 {
  font-size: 12px;
  color: gray;
  padding: 10px 25px;
}
.bottom{
  width: 100%;
  height: 400px;
  margin-top: 10px;
  background-color: white;
  border-radius: 10px 10px 0 0;
}
a {
  font-size: 12px;
  color: red;
  margin: 30px 15px;
}
.zi2{
    font-size: 12px;
    text-align: center;
    margin: 25px;
}
.zhuyi{
    font-size: 12px;
    margin: 20px 15px;
}
input{
    border-radius: 50%;
}
.zhuyi span{
    color: red;
}
</style>